<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>easyui测试</title>
	</head>
	<!-- 引入easyui -->
	<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
	
	<!-- 引入ZTree -->
	<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js" charset="UTF-8"></script>
	<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
	
	<script type="text/javascript">
		$(function() {
			$("#info").click(function() {
				// 添加一个选项卡
				$("#myTabs").tabs('add', {
					title:'基本信息',
					content:'姓名:西毒，年龄:不详，绝技:蛤蟆功',
					closable:true,
				});
			});
			
			// 1、 进行ztree菜单设置 
			var setting = {
				data: {
					simpleData: {
						enable: true // 支持简单json数据格式
					}
				},
				callback: {
					onClick : function(event, treeId, treeNode, clickFlag){
						var content = '<div style="width:100%;height:100%;overflow:hidden;">'
							+ '<iframe src="'
							+ treeNode.page
							+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
						
						// 没有page树形菜单，不打开选项卡
						if(treeNode.page != undefined && treeNode.page != ""){
							// 如果选项卡已经打开，选中 
							if($("#myTabs").tabs('exists',treeNode.name)){
								// 选中选项卡
								$("#myTabs").tabs('select',treeNode.name);
							}else{
								// 如果没有打开，添加选项卡 
								$("#myTabs").tabs('add',{
									title:treeNode.name,
									content: content,
									closable :true
								});
							}
						}
					}
				}
			};

			// 2、提供ztree树形菜单数据 
			var zNodes = [
				{id:1,pId:0,name:"蛤蟆神功上卷"},
				{id:2,pId:0,name:"蛤蟆神功下卷"},
				{id:3,pId:0,name:"九阴真经"},
				{id:11,pId:1,name:"学蛤蟆",page:"http://www.hama.com"},
				{id:12,pId:1,name:"到黑马",page:"http://www.itheima.com"},
				{id:13,pId:2,name:"学吹逼",page:"http://www.chuiniubi.com"},
				{id:14,pId:2,name:"看百度",page:"https://www.baidu.com"},
				{id:15,pId:3,name:"无"}
			];

			// 3、生成菜单
			$.fn.zTree.init($("#baseMenu"), setting, zNodes);
		});
	</script>
	<!-- 布局layout -->
	<body class="easyui-layout">
		<div data-options="region:'north',title:'北丐',split:'true'" style="height: 100px;">北丐</div>
		<div data-options="region:'west',title:'西毒',split:'true'" style="width: 200px;">
			
			
			<!-- 折叠accordion -->
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'基本信息'">
					<a href="javascript:void(0)" id="info">基本信息</a>
				</div>
				<div data-options="title:'武功秘籍'">
					
					<!-- 通过ztree 插件，制作树菜单 -->
					<ul id="baseMenu" class="ztree" ></ul>
					
				</div>
			</div>
			
		</div>
		<div data-options="region:'center',title:'中神通',split:'true'">
			
			
			<!-- 选项卡tabs -->
		<div id="myTabs" class="easyui-tabs">
			<div title="选项卡1" style="padding:20px;display:none;">选项卡1</div>
			<div title="选项卡2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">选项卡2</div>
			<div title="选项卡3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">选项卡3</div>
			
		</div>

			
		</div>
		<div data-options="region:'south',title:'南帝',split:'true'" style="height: 100px;">南帝</div>
		<div data-options="region:'east',title:'东邪',split:'true'" style="width: 200px;">东邪</div>
	</body>
</html>
